import { getBillAll } from '@/services';
import { Grid, List, NavBar } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { history, useModel, useSearchParams } from 'umi';
import styles from './index.less';
const BillDetail = () => {
  const [billData, setBillData] = useState<any>({});
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const { geTtransactionTypeValue } = useModel('useTransactionType');
  const getBillDetailFunc = (id: string) => {
    getBillAll({ id }).then((res) => {
      if (res.code === 1 && res.data.data.length) {
        setBillData(res.data.data[0]);
      }
    });
  };
  const back = () => {
    history.go(-1);
  };

  const getTypeValue = (key: number) => {
    let val = '';
    if (key === 1) {
      val = '收入';
    } else if (key === 2) {
      val = '支出';
    }
    return val;
  };

  const getPayTypeValue = (key: number) => {
    return key === 1 ? '支付宝' : '微信';
  };

  useEffect(() => {
    getBillDetailFunc(id);
  }, []);

  return (
    <div className={styles.container}>
      <NavBar style={{ backgroundColor: '#fff' }} back="返回" onBack={back}>
        账单详情
      </NavBar>
      <List mode="card">
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>交易人：</Grid.Item>
            <Grid.Item span={2}>{billData.trader}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>交易金额：</Grid.Item>
            <Grid.Item span={2}>{billData.money}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>类型：</Grid.Item>
            <Grid.Item span={2}>{getTypeValue(billData.type)}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>交易时间：</Grid.Item>
            <Grid.Item span={2}>{billData.payTime}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>交易类型：</Grid.Item>
            <Grid.Item span={2}>
              {geTtransactionTypeValue(billData.transactionType)}
            </Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>支付平台：</Grid.Item>
            <Grid.Item span={2}>{getPayTypeValue(billData.payType)}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>支付方式：</Grid.Item>
            <Grid.Item span={2}>{billData.paymentMethod}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>订单号：</Grid.Item>
            <Grid.Item span={2} style={{ overflowWrap: 'break-word' }}>
              {billData.transactionOrderNumber}
            </Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>id：</Grid.Item>
            <Grid.Item span={2}>{billData.id}</Grid.Item>
          </Grid>
        </List.Item>
        <List.Item>
          <Grid columns={3} gap={8}>
            <Grid.Item>备注：</Grid.Item>
            <Grid.Item span={2}>{billData.notes}</Grid.Item>
          </Grid>
        </List.Item>
      </List>
    </div>
  );
};

export default BillDetail;
